<template>
  <div class="login-box">
    <el-form
    class="login-form"
    :model="ruleForm"
    :rules="rules"
    >
      <h3 class="login-form-title">后台管理系统</h3>
      <el-form-item label="账号" prop="username">
        <el-input v-model="ruleForm.username" clearable></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" clearable type="password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button class="login-btn" type="primary" @click="submitForm">登录</el-button>
        <el-button >重置</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>
<script setup lang="ts">
//获取 vue 基础框架内容
import { ref , onMounted, reactive} from "vue";
// 实例化 pinia 仓库
import { storeToRefs } from "pinia"; // 把取消的响应式数据拿回来使用

// import { storeLoginData } from '@/store/login_store'
// const { loginResult } = storeToRefs(storeLoginData())
// const { storeLoginRequest } = storeLoginData()
// onMounted(async ()=>{
//
// })
// import { LoginModel } from '@/models/login'

const ruleFormRef = ref<FormInstance>()

import {FormInstance, FormRules} from "element-plus";

// 请求返回来的数据作为页面渲染参数
const ruleForm = reactive({
  username:'',
  password:'',
})

// 定义form表单校验规则,基于接口传参数进行处理
const rules = reactive<FormRules<typeof ruleForm>>({
  username: [{required: true, trigger: 'blur', message: '用户名不能为空'},
    {min: 3, max: 10, message: '账号长度在3-10个字符之间'}],
  password: [{required: true, trigger: 'blur', message: '密码不能为空'},
    {min: 3, max: 10, message: '密码长度在3-10个字符之间'}]
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

// 点击提交登录操作
// const submitForm = (formEl:FormInstance | undefined) => {
//   if (!formEl) return
//   console.log("拿到参数",formEl)
//   formEl.validate((valid) => {
//     console.log("显示vlid=", valid)
//   })
//   // formEl.validate((valid) => {
//   //   if (valid) {
//   //     console.log("校验成功,可以提交信息")
//   //     // console.log("提交的请求参数", params)
//   //     // storeLoginRequest()
//   //     // console.log("登录拿到的返回结果", loginResult)
//   //   } else {
//   //     console.log("校验失败,无法提交")
//   //     return false
//   //   }
//   // })
//
// }


</script>

<style scoped lang="scss">
//  全局设置背景图片
.login-box {
  width: 100%;
  height: 100%;
  background: url("@/assets/6.jpg");
  padding: 1px;
  //设置登录form样式
  .login-form {
    width: 500px;
    margin: 200px auto;
    // 设置登录框背景为白色
    background-color: white;
    // 设置form距离边框的边距为 20px
    padding: 40px;
    // 设置边框为圆角
    border-radius: 20px;
    .login-btn {
      width: 40%;
    }
    .login-form-title {
      text-align: center;
      // 设置标题和box顶部挨着,左右自适应,底部和账号输入框距离15
      margin: 0 auto 15px;
    }
  }
}
</style>